/**
 * yufp-copyuser-selector
 * 办理人员选择弹窗自定义组件
 * 注：自定义组件规范：
 * 1、对外默认提供v-model配置,raw-value
 * 2、对外提供readonly、disabled、size属性
 * 3、对外接口事件：select-fn,具体参数请自定义
 * Created by zhouqh on 2020/1/15.
 */
(function(vue, $, name) {
	vue.component(name, {
		template: '<div>\
            <el-input v-model="selectedVal" readonly :placeholder="placeholder" :disabled="disabled"\
            :size="size" :name="name" :icon="icon" :on-icon-click="onIconClickFn" @click.native="clickFn">\
            </el-input>\
            <el-dialog-x :title="dialogTitle" :visible.sync="dialogVisible" @open="dialogOpen" @close="afterClose">\
              <el-card class="box-card" v-show="true">\
                  <el-tag v-for="tag in selectedOpts" :key="tag.key" type="success" closable @close="TagClose(tag)">\
                      {{tag.value}}\
                  </el-tag>\
              </el-card>\
			  <el-tabs type="border-card" value="user" @tab-click="TabClick">\
			    <el-tab-pane v-for="item in selectInfos" :label="item.label" :name="item.key">\
				<yu-form :inline="true" :model="queryFields">\
				  <yu-form-item>\
				    <yu-input v-model="queryFields.id" placeholder="编号" v-if="item.key !=\'nodeUser\'"></yu-input>\
				    <yu-input v-model="queryFields.id" placeholder="方法名" v-if="item.key ==\'nodeUser\'"></yu-input>\
				  </yu-form-item>\
				  <yu-form-item>\
				    <yu-input v-model="queryFields.name" placeholder="名称" v-if="item.key !=\'nodeUser\'"></yu-input>\
				    <yu-input v-model="queryFields.name" placeholder="描述" v-if="item.key ==\'nodeUser\'"></yu-input>\
				  </yu-form-item>\
				  <yu-form-item>\
				    <yu-button type="primary" @click="doQuery">查询</yu-button>\
				  </yu-form-item>\
				  <yu-form-item>\
				    <yu-button @click="reset">重置</yu-button>\
				  </yu-form-item>\
				</yu-form>\
					<el-table ref="reftable" :data="item.selectOptions" @row-dblclick="RowDbClick" v-if="item.key !=\'nodeUser\'">\
						<el-table-column prop="key" label="编号" align="center" >\
						</el-table-column>\
						<el-table-column prop="value" label="名称" align="center">\
						</el-table-column>\
					</el-table>\
					<el-table ref="reftable" :data="item.selectOptions" @row-dblclick="RowDbClickExt" v-if="item.key ==\'nodeUser\'">\
						<el-table-column prop="key" label="方法名" align="center" >\
						</el-table-column>\
						<el-table-column prop="value" label="描述" align="center">\
						</el-table-column>\
					</el-table>\
				</el-tab-pane>\
				<el-pagination v-if=" tabName != \'nodeUser\' " small \
							layout="prev, pager, next, sizes, total, jumper"\
							:page-sizes="[5, 10, 15, 20]"\
							:page-size="pagesize"\
							:current-page="currentPage"\
							:total="total"\
							@current-change="CurrentChange"\
							@size-change="SizeChange"\
							>\
				</el-pagination>\
			  </el-tabs>\
              <div style="margin-top: 20px" slot="footer" class="dialog-footer">\
                  <el-button @click="dialogClose">选取返回</el-button>\
              </div>\
            </el-dialog-x>\
          </div>',

		props: {
			// 下述字段为el-input组件中部分属性，配置文档参见element-ui
			name: {
				type: String
			},
			value: {
				required: true
			},
			rawValue: String,
			size: String,
			disabled: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ''
			},
			icon: {
				type: String,
				default: 'search'
			},
			params: Object,
		},
		data: function() {
			return {
				url: {
					getuserinfo: backend.workflowService + '/api/org/info'
				},
				selectedVal: '',
				dialogVisible: false,
				dialogTitle: '抄送人员选择',
				selectInfos: [],
				selectedOpts: [],
				urls: [{
						label: '用户',
						key: 'user',
						value: backend.workflowService + '/api/org/users'
					},
					{
						label: '部门',
						key: 'dept',
						value: backend.workflowService + '/api/org/depts'
					},
					{
						label: '角色',
						key: 'role',
						value: backend.workflowService + '/api/org/roles'
					},
					{
						label: '岗位',
						key: 'duty',
						value: backend.workflowService + '/api/org/dutys'
					},
					{
						label: '机构',
						key: 'org',
						value: backend.workflowService + '/api/org/orgs'
					},
					{
						label: '自定义',
						key: 'nodeUser',
						value: backend.workflowService + '/api/studio/dict'
					},
				],
				queryFields: {
				  id: '',
				  name: ''
				},
				index: 0,
				pagesize: 5,
				currentPage: 1,
				tabName: 'user',
				total:0,
				customize:''
			};
		},
		methods: {
			// 查询按钮
			doQuery: function() {
			  this.getUserInfo(this.tabName);
			},
			// 重置按钮
			reset: function() {
			  this.queryFields.id = '';
			  this.queryFields.name = '';
			},
			clickFn: function() {
				this.$emit('click-fn', this);
			},
			onIconClickFn: function(val) {
				if (this.disabled) {
					return;
				}
				this.dialogVisible = true;
			},
			//tab页点击事件
			TabClick: function(tab, event) {
				this.tabName = tab.name;
				this.reset();
				this.getUserInfo(tab.name);
			},
			//初始化表格数据信息
			initData:function(){
				for (var i=0;i<this.urls.length;i++) {
					var url = this.urls[i];
					var option = {
						key: url.key,
						label: url.label,
						selectOptions:[],
						total: 0
					};
					this.selectInfos.push(option);
				}
			},
			//获取人员与部门等信息
			getUserInfo: function(val) {
				var conditions = {
				    orgId: yufp.session.org.code
				};
				// 添加查询条件
				switch (val) {
				  case 'user':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.userId = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.userName = '%' + this.queryFields.name + '%';
				    }
				    break;
				  case 'dept':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.deptId = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.deptName = '%' + this.queryFields.name + '%';
				    }
				    break;
				  case 'role':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.roleId = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.roleName = '%' + this.queryFields.name + '%';
				    }
				    break;
				  case 'duty':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.dutyId = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.dutyName = '%' + this.queryFields.name+ '%';
				    }
				    break;
				  case 'org':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.orgCode = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.orgName = '%' + this.queryFields.name + '%';
				    }
				    break;
				  case 'pool':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.poolId = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.poolName = '%' + this.queryFields.name + '%';
				    }
				    break;
				  case 'nodeUser':
				    if(this.queryFields.id != null && this.queryFields.id != ''){
				      conditions.name = this.queryFields.id;
				    }
				    if(this.queryFields.name != null && this.queryFields.name != '') {
				      conditions.desc = this.queryFields.name;
				    }
				    break;
				}
				var param = {
					condition: JSON.stringify(conditions),
					page: this.currentPage,
					size: this.pagesize
				};
				var _this = this;
				for (var i=0;i<_this.urls.length;i++) {
					var url = _this.urls[i];
					if (url.key === val && val != 'nodeUser') {
						yufp.service.request({
							method: 'GET',
							data: param,
							url: url.value,
							callback: function(code, message, response) {
								if (response.code == 0) { // 转化为key-value形式便于选择
									if (response.data != null) {
										var data = response.data;
										_this.total = response.total;
										for(var k=0;k<_this.selectInfos.length;k++){
											if(val == _this.selectInfos[k].key){
												_this.selectInfos[k].total = _this.total;
												_this.selectInfos[k].selectOptions = _this.coventUser(val,data);
											}
										}
									}
								}
							}
						});
					}else if (url.key === val && val == 'nodeUser') {
						yufp.service.request({
							method: 'GET',
							data: param,
							url: url.value,
							callback: function(code, message, response) {
								if (response !== null) { // 转化为key-value形式便于选择
									var data = response.nodeUser;
									_this.total = data.length;
									for(var k=0;k<_this.selectInfos.length;k++){
										if(val == _this.selectInfos[k].key){
											_this.selectInfos[k].total = _this.total;
											_this.selectInfos[k].selectOptions = _this.coventUser(val,data);
										}
									}
								}
							}
						});
					}
				}
			},
			//将获取到的数据转换为key-value的形式保存
			coventUser: function(type,data) {
				var options = [];
				if (type == 'user') {
					for (var j = 0; j < data.length; j++) {
						var option = {
							key: data[j].userId,
							value: data[j].userName,
							type: type
						};
						options.push(option);
					}
				} else if (type == 'dept') {
					for (var j = 0; j < data.length; j++) {
						var option = {
							key: data[j].deptId,
							value: data[j].deptName,
							type: type
						};
						options.push(option);
					}
				} else if (type == 'role') {
					for (var j = 0; j < data.length; j++) {
						var option = {
							key: data[j].roleId,
							value: data[j].roleName,
							type: type
						};
						options.push(option);
					}
				} else if (type == 'duty') {
					for (var j = 0; j < data.length; j++) {
						var option = {
							key: data[j].dutyId,
							value: data[j].dutyName,
							type: type
						};
						options.push(option);
					}
				} else if (type == 'org') {
					for (var j = 0; j < data.length; j++) {
						var option = {
							key: data[j].orgId,
							value: data[j].orgName,
							type: type
						};
						options.push(option);
					}
				} else if (type == 'nodeUser') {
					for (var j = 0; j < data.length; j++) {
						var option = {
							key: data[j].key,
							value: data[j].desc,
							type: type
						};
						options.push(option);
					}
				}
				return options;
			},
			//翻译初始的ID
			dialogOpen: function() {
				var _this = this;
				_this.getUserInfo(_this.tabName);
				if (_this.selectedVal) {
					var param = {
						condition: JSON.stringify({
							systemId: 'cmis',
							code: _this.selectedVal
						})
					};
					yufp.service.request({
						url: _this.url.getuserinfo,
						method: 'GET',
						data: param,
						callback: function(code, message, response) {
							if (response.code === 0) {
								if (response.data != null) {
									var data = response.data;
									for (var i = 0; i < data.length; i++) {
										var n = {
											key: data[i].code,
											value: data[i].name
										}
										_this.selectedOpts.push(n);
									}
								}
							}
						}
					});
				}
			},
			afterClose: function() {
				this.selectedOpts = [];
				this.reset();
			},
			RowDbClick: function(row, event) { //列表双击事件
				var user = {
					key: '',
					value: row.value,
					type: row.type
				};
				if (row.type == 'user') {
					user.key = 'U.' + row.key;
				} else if (row.type == 'dept') {
					user.key = 'D.' + row.key;
				} else if (row.type == 'role') {
					user.key = 'R.' + row.key;
				} else if (row.type == 'duty') {
					user.key = 'G.' + row.key;
				} else if (row.type == 'org') {
					user.key = 'O.' + row.key;
				} else if (row.type == 'nodeUser') {
					user.key = 'E.' + row.key;
				}
				if (this.selectedOpts == undefined) {
					this.$set(this, 'selectedOpts', []);
				}
				var userInfosT = this.selectedOpts;
				for (var i = 0; i < userInfosT.length; i++) { // 去重
					if (userInfosT[i].key == user.key) {
						return;
					}
				}
				userInfosT.push(user);
			},
			RowDbClickExt: function(row, event) { //列表双击事件-自定义处理
				var user = {
					key: 'E.'+row.key,
					value: row.value,
					type: row.type
				};
				if (this.selectedOpts == undefined) {
					this.$set(this, 'selectedOpts', []);
				}
				var userInfosT = this.selectedOpts;
				for (var i = 0; i < userInfosT.length; i++) { // 去重
					if (userInfosT[i].key == user.key) {
						return;
					}
				}
				userInfosT.push(user);
			},
			TagClose: function(tag) { //tag页签关闭事件
				if (this.selectedOpts == undefined) {
					this.$set(this, 'selectedOpts', []);
				}
				var userInfosT = this.selectedOpts;
				userInfosT.splice(userInfosT.indexOf(tag), 1);
			},
			dialogClose: function() {
				if (this.selectedOpts.length < 1) {
					this.selectedVal = '';
					this.$emit('input', '');
					this.dialogVisible = false;
					this.$message('没有选择抄送人员!');
					return;
				}
				var selectedId = '';
				var selectedName = '';
				for (var i = 0; i < this.selectedOpts.length; i++) {
					selectedId += this.selectedOpts[i].key + ';';
					selectedName += this.selectedOpts[i].value + ';';
				}
				this.selectedVal = selectedId;
				this.$emit('input', selectedId);
				this.$emit('select-fn', this.selectedOpts, selectedId, selectedName);
				this.dialogVisible = false;
			},
			// 对外提供选择器显示值
			getRawValue: function() {
				return this.selectedVal;
			},
			convertKey: function(val) {
				// 将key转换为对应的value值
				return val;
			},
			CurrentChange: function(cpage) {
				this.currentPage = cpage;
				this.getUserInfo(this.tabName);
			},
			SizeChange: function(psize) {
				this.pagesize = psize;
				this.getUserInfo(this.tabName);
			},

		},
		mounted: function() {
			this.selectedVal = this.rawValue ? this.rawValue : this.value;
			this.initData();
			this.getUserInfo('user');
		},
		watch: {
			value: function(val) {
				// 将key转换为对应的value值
				if (!val) {
					this.selectedVal = '';
					return;
				}
				this.selectedVal = this.selectedVal ? this.selectedVal : val;
			},
			rawValue: function(val) {
				this.selectedVal = val;
			}
		}

	});
}(Vue, yufp.$, 'yufp-copyuser-selector'));
